Unidad 1 - Herramientas de desarrollo web

Esta web resume los conceptos más importantes sobre Visual Studio Code, Git, GitHub, SSH, ramas, trabajo en remoto y control de versiones. Cada bloque contiene teoría, ejemplos, curiosidades, errores típicos y mini-test para practicar antes del examen.

1. Visual Studio Code

Editor VS Code HTML

Visual Studio Code es uno de los editores de código más utilizados del mundo. Es gratuito, ligero y compatible con HTML, CSS, JavaScript, Python, Java y muchos más.

Características importantes

  • Interfaz sencilla y rápida.
  • Compatible con extensiones.
  • Incluye resaltado de sintaxis.
  • Integración con Git.
  • Terminal integrada.

Primeros pasos

  1. Instalar Visual Studio Code.
  2. Abrir una carpeta de proyecto.
  3. Crear archivos .html, .css o .js.
  4. Guardar el proyecto.
Consejo: trabaja siempre dentro de carpetas organizadas.

Ejemplo HTML básico

<!DOCTYPE html> <html> <head> <title>Mi web</title> </head> <body> <h1>Hola mundo</h1> </body> </html>

Mini-test

1. ¿Qué lenguaje viene soportado por defecto en VS Code?

2. Live Server y extensiones

Live Server permite actualizar automáticamente el navegador cada vez que guardamos cambios.

Ventajas

  • No necesitas refrescar manualmente.
  • Aumenta la velocidad de desarrollo.
  • Ideal para HTML y CSS.

Cómo usarlo

  1. Instalar extensión Live Server.
  2. Abrir archivo HTML.
  3. Pulsar "Go Live".
Pregunta trampa: Live Server NO es un hosting real, solo un servidor local.

Extensiones recomendadas

Extensión Función
Live Server Recarga automática
Auto Rename Tag Renombra etiquetas automáticamente
GitLens Información avanzada de Git

Mini-test

1. ¿Qué hace Live Server?

3. Emmet y productividad

Emmet acelera la escritura de HTML usando abreviaturas.

Ejemplo

ul>li*3

Se convierte en:

<ul> <li></li> <li></li> <li></li> </ul>

Abreviaturas útiles

Abreviatura Resultado
html:5 Estructura HTML completa
link:css Enlace CSS
meta:vp Meta viewport

Mini-test

1. ¿Qué hace html:5?

4. Atajos de teclado útiles

Atajo Función
Ctrl + S Guardar archivo
Ctrl + Shift + P Paleta de comandos
Shift + Alt + F Formatear documento
Ctrl + N Nuevo archivo
Truco: aprender atajos ahorra muchísimo tiempo en proyectos grandes.

Mini-test

1. ¿Qué hace Shift + Alt + F?

5. Git

Git es un sistema de control de versiones distribuido.

¿Para qué sirve?

  • Guardar versiones del proyecto.
  • Volver atrás si algo falla.
  • Trabajar en equipo.
  • Crear ramas independientes.
Git y GitHub NO son lo mismo.

Concepto importante

Git trabaja con snapshots (fotografías del proyecto).

Mini-test

1. Git es...

6. Instalación y configuración Git

Instalar Git

sudo apt install git

Verificar versión

git --version

Configuración inicial

git config --global user.name "Tu Nombre" git config --global user.email "correo@email.com"
Usa siempre el mismo email que tu cuenta GitHub.

Mini-test

1. ¿Qué comando configura el nombre?

7. GitHub

GitHub es una plataforma online para alojar repositorios Git.

Funciones principales

  • Guardar proyectos en la nube.
  • Trabajo colaborativo.
  • Control de versiones.
  • Publicar proyectos.
Pregunta trampa: Git funciona sin GitHub.

Mini-test

1. GitHub sirve para...

8. SSH y autenticación

Generar clave SSH

ssh-keygen -t rsa -b 4096 -C "correo@email.com"

Comprobar autenticación

ssh -T git@github.com
Nunca compartas tu clave privada.

Mini-test

1. ¿Qué archivo es público?

9. Comandos básicos Git

Comando Función
git init Inicializa repositorio
git status Estado del repositorio
git help -a Lista comandos
git status es uno de los comandos más usados.

Mini-test

1. ¿Qué hace git init?

10. Staging y commits

Las 3 zonas Git

  • Working copy
  • Staging area
  • Repository

Comandos importantes

git add . git commit -m "Primer commit"
Solo se guarda en el commit lo añadido al staging area.

Mini-test

1. ¿Qué hace git add?

11. Historial y diferencias

Ver historial

git log --graph --decorate --pretty=oneline

Ver diferencias

git diff git diff --staged
git reflog ayuda muchísimo para recuperar commits perdidos.

Mini-test

1. ¿Qué muestra git diff?

12. Branches

Las ramas permiten desarrollar funcionalidades en paralelo.

Comandos

git branch nueva-rama git checkout nueva-rama git branch
No puedes borrar la rama donde estás situado.

Mini-test

1. ¿Qué comando cambia de rama?

13. Merge y conflictos

Unir ramas

git merge rama-secundaria

Resolver conflictos

  1. Editar archivos.
  2. Hacer git add.
  3. Hacer commit.
git merge --abort

Mini-test

1. ¿Qué hace git merge?

14. Repositorios remotos

Clonar repositorio

git clone URL

Añadir remoto

git remote add origin URL
origin es el nombre remoto más habitual.

Mini-test

1. ¿Qué hace git clone?

15. Pull, push y fetch

Comando Función
git push Sube cambios
git pull Descarga y fusiona
git fetch Descarga cambios sin fusionar
git pull = git fetch + git merge

Mini-test

1. ¿Qué hace git push?

16. Etiquetas: Tags y versiones

Las etiquetas sirven para marcar versiones importantes.

Crear tag

git tag -a v1.0 -m "Versión 1.0"

Eliminar tag

git tag --delete v1.0
Muy usado para versiones estables y lanzamientos.

Mini-test

1. ¿Para qué sirve un tag?

Fin de la Unidad 1 · Sigue practicando cada día 🚀